<template>
  <div class="main">
    <div class="main_top">
      <img width="100%" height="100%" src="../assets/images/1111.jpg" alt />
    </div>
    <div class="form">
      <div class="tit">登录</div>
      <div class="user_pwd">
        <input class="user" v-model="user" placeholder="账号" type="text" />
        <input class="pwd" v-model="pwd" placeholder="密码" type="password" />
      </div>
      <div class="footer">
        <mt-button class="btn" @click="login" type="danger">登录</mt-button>
      </div>
      <div class="bott">
        <span class="bot_left" @click="wjPwd">忘记密码</span>
        <span class="bot_rig" @click="register">注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import https from "../utils/http.js";
import CryptoJS from "crypto-js";
export default {
  props: {},
  data() {
    return {
      user: "",
      pwd: ""
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    register() {
      console.log("2222");
      this.$router.push("/register");
    },
    wjPwd(){
      if(this.user == ''){
        Toast('请输入手机号');
      }else{
        https({
        method: "get",
        url: "/api/v1/Systems/ForgetPWD/"+this.user,
        data: {}
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            Toast(res.Describe);
          } else {
            Toast({
              message: res.Describe
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
      }
    },
    login() {
      var strCiphertext = "";
      var key = CryptoJS.enc.Utf8.parse("26567E43738a8F91)E4E34e8D6E1E28A");
      var iv = CryptoJS.enc.Utf8.parse("3d03AD3F-2Ac26A2");
      var encrypted = CryptoJS.AES.encrypt(this.pwd, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      strCiphertext = encrypted.ciphertext.toString(); //密文
      https({
        method: "post",
        url: "/api/v1/Systems/Login",
        data: {
          LoginCode: this.user,
          Computer: "123",
          Browser: "123",
          LoginPWD: strCiphertext
        }
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            Toast({
              message: "登录成功",
              iconClass: "icon icon-success"
            });
            localStorage.setItem("token", res.Data.Token);
            localStorage.setItem("Identity", res.Data.Identity);
            localStorage.setItem("name", res.Data.Name);
            this.$router.push("/index");
          } else {
            Toast({
              message: res.Describe
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  background: #fff;

  //   position: relative;

  img {
    width: 100%;
    height: calc(100% -100px);
  }
  .zhe {
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    opacity: 0.4;
  }
  .main_top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 500px;
    // background: #ff4d4f;
    overflow: hidden;

    // box-shadow: 3px 3px 10px #ff4d4f;
    opacity: 0.8;
  }
  .form {
    width: 80%;
    height: 700px;
    background: #fff;
    border-radius: 20px;
    border: 2px solid #eee;
    position: absolute;

    top: 25%;
    left: 10%;
    box-shadow: 3px 3px 10px #eee;
    .tit {
      width: 100%;
      height: 32px;
      line-height: 32px;
      font-size: 1.5rem;
      font-weight: 600;
      margin-top: 10%;
      padding-left: 10%;
      //   box-sizing: border-box;
    }
    .user_pwd {
      width: 100%;

      box-sizing: border-box;
      padding-top: 2rem;
      .user {
        width: 85%;
        height: 2.5rem;
        border-radius: 5px;
        margin-left: 7.5%;
        background: #f1f1f1;
        text-indent: 1em;
        box-sizing: border-box;
      }
      .pwd {
        width: 85%;
        height: 2.5rem;
        border-radius: 5px;
        margin-left: 7.5%;
        background: #f1f1f1;
        margin-top: 1rem;
        text-indent: 1em;
        box-sizing: border-box;
      }
    }
    .footer {
      width: 100%;
      padding-top: 2rem;
      box-sizing: border-box;
      .btn {
        width: 85%;
        margin-left: 7.5%;
        background: #ff4d4f;
      }
    }
    .bott {
      width: 85%;
      margin-left: 7.5%;
      height: 50px;
      font-size: 0.8rem;
      color: #666;
      padding-top: 1rem;
      box-sizing: border-box;
      .bot_left {
        float: left;
      }
      .bot_rig {
        float: right;
      }
    }
  }
  //   .footer {
  //     width: 100%;
  //     text-align: center;
  //     .btn {
  //       width: 80%;
  //       margin: 0 auto;
  //       border-radius: 40px;
  //     }
  //   }
}
</style>
